<template>
  <div class="mental-user-detail pad">
    <el-page-header class="page-header" @back="goBack" :content="title">
    </el-page-header>
    <!-- <div class="member-wrap">
      <div class="wrap-left">
        <div class="w-title">成员列表</div>
        <div>
          <el-table :data="memberList">
            
          </el-table>
        </div>
      </div>
      <div class="wrap-right">
        <div class="w-title">成员详情</div>
      </div>
    </div> -->
    <el-table :data="memberList" stripe border v-loading="mLoading">
      <el-table-column label="成员昵称" prop="psychologicalClinicalUserName"></el-table-column>
      <el-table-column label="成员头像">
        <template slot-scope="scopes">
          <img :src="scopes.row.headPortrait" class="m-avatar" />
        </template>
      </el-table-column>
      <el-table-column label="成员性别">
        <template slot-scope="scopes">
          {{scopes.row.psychologicalClinicalUserGender == '1' ? '男' : '女'}}
        </template>
      </el-table-column>
      <el-table-column label="成员年龄" prop="psychologicalClinicalUserAge"></el-table-column>
      <el-table-column label="成员手机号" prop="psychologicalClinicalUserPhone"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scopes">
          <el-button type="text" size="mini" @click="lookRecord(scopes.row)">查看问诊记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="m-title">
      <i />
      <span>当前选中成员：{{selectUser.name}}</span>
      <i />
    </div>
    <div class="chart-wrap m-t-b">
      <div class="c-title flex">量表购买记录</div>
      <div class="c-box">
        <el-table :data="purchaseList" border stripe v-loading="purchaseLoading">
          <el-table-column label="医生姓名" prop="clinicianName"></el-table-column>
          <el-table-column label="量表名称" prop="psychologyTitle"></el-table-column>
          <el-table-column label="量表价格">
            <template slot-scope="scopes">
              {{scopes.row.tradeMoney ? scopes.row.tradeMoney + '元' : '免费'}}
            </template>
          </el-table-column>
          <el-table-column label="购买事件" prop="createDate"></el-table-column>
        </el-table>
        <el-pagination
          class="flex bottom-pagi"
          :page-size="pageSize"
          layout="prev, pager, next"
          :current-page="curPurchasePage"
          @current-change="handlePurchasePagi"
          :total="purchaseTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getMemberByOpenId,
  getMemberOrder
} from '../api/hospitalAPI';
import {
  getAge,
  formatDate
} from '../util';
export default {
  name: 'MentalUserDetail',
  props: ['id', 'nickname'],
  data () {
    return {
      title: '',
      memberList: [],
      pageSize: 10,
      mLoading: true,
      curPurchasePage: 1,
      purchaseList: [],
      purchaseTotal: 0,
      selectUser: {
        name: '--',
        id: ''
      },
      purchaseLoading: true
    }
  },
  methods: {
    goBack () {
      history.back()
    },
    fetchMemberList () { // 查询成员列表
      this.mLoading = true;
      getMemberByOpenId(this.id)
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data || [];
          list.forEach(item => {
            item.createDate = formatDate(item.createDate, 'zh:');
            let tempArr = item.psychologicalClinicalUserAge.split('-');
            item.psychologicalClinicalUserAge = getAge(...tempArr) + '岁'
          });
          this.memberList = list;
          if (list.length) {
            this.selectUser.name = list[0].psychologicalClinicalUserName;
            this.selectUser.id = list[0].psychologicalClinicalUserId;
            this.fetchMemberOrder(1, list[0].psychologicalClinicalUserId)
          }
        } else {
          this.$message.error(res.data.msg || '服务异常!')
        };
        this.mLoading = false
      })
      .catch(e => {
        this.mLoading = false;
        this.$message.error('服务异常！')
      })
    },
    lookRecord ({ psychologicalClinicalUserName, psychologicalClinicalUserId }) { // 查看成员问诊记录
      if (this.selectUser.id == psychologicalClinicalUserId) return;
      this.curPurchasePage = 1;
      this.selectUser.name = psychologicalClinicalUserName;
      this.selectUser.id = psychologicalClinicalUserId;
      this.fetchMemberOrder(1, this.selectUser.id)
    },
    fetchMemberOrder (index, mId) { // 查询成员购买量表记录
      this.purchaseLoading = true;
      getMemberOrder({
        index,
        count: this.pageSize,
        queryParam: {
          psychologicalClinicalUserId: mId
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data.list || [];
          list.forEach(item => {
            item.createDate = formatDate(item.createDate, 'zh:')
          });
          this.purchaseList = list;
          this.purchaseTotal = res.data.data.totalRecord
        } else {
          this.$message.error(res.data.msg || '服务异常！')
        };
        this.purchaseLoading = false
      })
      .catch(e => {
        this.purchaseLoading = false;
        this.$message.error('服务异常！')
      })
    },
    handlePurchasePagi (page) {
      this.fetchMemberOrder(page, this.selectUser.id)
    }
  },
  created () {
    let path = this.$route.meta.path;
    // this.title = path[path.length - 1]
    this.title = this.nickname + '的成员列表';
    this.fetchMemberList()
  }
}
</script>
<style lang="scss">
  .mental-user-detail {
    .bottom-pagi {
      border: 1px solid #EBEEF5;
      // border-top: none;
    }
    .chart-wrap {
      display: flex;
      .c-title {
        width: 50px;
        padding: 0 12px;
        box-sizing: border-box;
        border: 1px solid #EBEEF5;
        border-right: none;
      }
      .c-box {
        flex: 1;
      }
    }
    .member-wrap {
      display: flex;
      border: 1px solid #f8f8f8;
      border-radius: 6px;
      overflow: hidden;
    }
    .wrap-left {
      width: 200px;
    }
    .wrap-right {
      flex: 1;
    }
    .w-title {
      padding: 10px;
      border-bottom: 1px solid #f8f8f8;
      &:nth-of-type(1) {
        border-right: 1px solid #f8f8f8;
      }
    }
    .m-avatar {
      width: 80px;
      height: 80px;
      border-radius: 5px;
    }
    .cell {
      text-align: center;
    }
    .m-title {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        display: block;
        flex: 1;
        height: 1px;
        background-color: #4AC493;
      }
      span {
        padding: 0 10px;
        font-size: 20px;
        font-weight: bold;
        color: #4AC493;
      }
    }
  }
</style>
